<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Sl4</title>
		<style scoped>
			li{
				list-style: none;
				display: block;
			}
		</style>
	</head>
	<body>
		<template>
			<div class="list">
				<h2>新闻</h2>
				<ul>
					<li>
						<router-link to="/news/1">第一条新闻</router-link>
					</li>
					<li>
						<router-link to="/news/2">第二条新闻</router-link>
					</li>
					<li>
						<router-link to="/news/3">第三条新闻</router-link>
					</li>
				</ul>
			</div>
		</template>
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
		<script src="vue.min.js"></script>
		<script>
			export default {};
			//下面是 router 下的 index.js代码
			import Vue from ' vue'
			import Router from 'vue-router'
			import Home from '@/components/Home'
			import News from '@/components/News'
			import NewsDetail from '@/components/NewsDetail'
			
			Vue.use(Router)
			
			export default new Router({
				routes:[
					{
						path:'/',
						name:'Home',
						component:Home
					},
					{
						path:'/news',
						component:News
					},
					{
						path:'/news/:id',
						component:NewsDetail
					}
				]
			})
			
		</script>
	</body>
</html>
